<template>
  <div class="dashboard">
    <div class="header">
      <div class="container">
        <div class="header-content">
          <h1 class="logo">Vue2 Auth System</h1>
          <div class="nav">
            <el-button type="text" @click="$router.push('/dashboard')">首页</el-button>
            <el-button type="text" @click="$router.push('/profile')">个人资料</el-button>
            <el-button type="text" @click="handleLogout" class="logout-btn">退出登录</el-button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="main-content">
      <div class="container">
        <h2 class="welcome-title">欢迎回来, {{ userInfo.name }}!</h2>
        
        <div class="card user-info">
          <h3>用户信息</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <p><strong>用户名:</strong> {{ userInfo.username }}</p>
              <p><strong>邮箱:</strong> {{ userInfo.email }}</p>
            </el-col>
            <el-col :span="12">
              <p><strong>角色:</strong> {{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}</p>
              <p><strong>用户ID:</strong> {{ userInfo.id }}</p>
            </el-col>
          </el-row>
        </div>
        
        <div class="card token-info">
          <h3>Token信息</h3>
          <p><strong>当前Token:</strong></p>
          <el-input
            type="textarea"
            :value="token"
            :rows="3"
            readonly
            class="token-display"
          ></el-input>
        </div>
        
        <div class="actions">
          <el-button type="primary" @click="fetchData">获取数据</el-button>
          <el-button @click="refreshToken">刷新Token</el-button>
        </div>
        
        <div v-if="dataList.length" class="card data-list">
          <h3>获取的数据列表 (前5条)</h3>
          <el-table :data="dataList.slice(0, 5)" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserInfo, getToken, setToken, clearAuth } from '@/utils/token'

export default {
  name: 'Dashboard',
  data() {
    return {
      userInfo: getUserInfo() || {},
      token: getToken() || '',
      dataList: []
    }
  },
  methods: {
    handleLogout() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearAuth()
        this.$message.success('已退出登录')
        this.$router.push('/login')
      })
    },
    
    async fetchData() {
      try {
        // 模拟API调用
        const response = await this.mockGetData()
        this.dataList = response.data || []
        this.$message.success('数据获取成功')
      } catch (error) {
        this.$message.error('获取数据失败')
      }
    },
    
    refreshToken() {
      // 模拟刷新token
      const newToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.' + 
                     btoa(JSON.stringify({
                      userId: this.userInfo.id,
                      username: this.userInfo.username,
                      role: this.userInfo.role,
                      exp: Date.now() + 2 * 60 * 60 * 1000
                     })) + '.new_signature'
      
      setToken(newToken)
      this.token = newToken
      this.$message.success('Token已刷新')
    },
    
    mockGetData() {
      return new Promise((resolve) => {
        setTimeout(() => {
          const mockData = []
          for (let i = 1; i <= 10; i++) {
            mockData.push({
              id: i,
              title: `示例数据项 ${i}`,
              content: `这是第 ${i} 条示例数据的详细内容`
            })
          }
          resolve({
            code: 200,
            data: mockData
          })
        }, 1000)
      })
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
.dashboard {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.logo {
  color: #409EFF;
  font-size: 24px;
  font-weight: 700;
}

.nav .el-button {
  margin-left: 10px;
}

.logout-btn {
  color: #F56C6C;
}

.logout-btn:hover {
  color: #f78989;
}

.main-content {
  padding: 20px 0;
}

.welcome-title {
  color: #333;
  margin-bottom: 30px;
  font-size: 28px;
}

.user-info h3, .token-info h3, .data-list h3 {
  color: #333;
  margin-bottom: 15px;
  font-size: 18px;
}

.user-info p {
  margin: 10px 0;
  color: #666;
}

.token-display {
  margin-top: 10px;
}

.actions {
  margin: 20px 0;
  text-align: center;
}

.actions .el-button {
  margin: 0 10px;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .nav {
    margin-top: 15px;
  }
}
</style>